<template>
  <div class="account-info">
    <!-- 用户名 -->
    <div class="account-item username">
      <div class="label">
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clip-path="url(#clip0_69_1188)">
            <path
              d="M16.6668 18.3335H15.0002V16.6668C15.0002 15.286 13.8809 14.1668 12.5002 14.1668H7.50016C6.11945 14.1668 5.00016 15.286 5.00016 16.6668V18.3335H3.3335V16.6668C3.3335 14.3656 5.19898 12.5001 7.50016 12.5001H12.5002C14.8013 12.5001 16.6668 14.3656 16.6668 16.6668V18.3335ZM10.0002 10.8335C7.23874 10.8335 5.00016 8.59488 5.00016 5.83347C5.00016 3.07204 7.23874 0.833466 10.0002 0.833466C12.7616 0.833466 15.0002 3.07204 15.0002 5.83347C15.0002 8.59488 12.7616 10.8335 10.0002 10.8335ZM10.0002 9.1668C11.8411 9.1668 13.3335 7.67442 13.3335 5.83347C13.3335 3.99252 11.8411 2.50013 10.0002 2.50013C8.15921 2.50013 6.66683 3.99252 6.66683 5.83347C6.66683 7.67442 8.15921 9.1668 10.0002 9.1668Z"
              fill="#3D88F2"
            />
          </g>
          <defs>
            <clipPath id="clip0_69_1188">
              <rect width="20" height="20" fill="white" />
            </clipPath>
          </defs>
        </svg>
        <span>{{ $t("content.account_info.username") }}</span>
      </div>
      <div class="value">
        <span
          :class="
            memberStore.profile?.last_name && memberStore.profile?.first_name
              ? ''
              : 'none'
          "
          >{{
            memberStore.profile?.last_name +' '+ memberStore.profile?.first_name ||
            $t("content.account_info.username")
          }}</span
        >
      </div>
      <div class="button">
        <div class="button-item" @click="onClickEditNickname">
          {{ $t("btnText.edit") }}
        </div>
      </div>
    </div>
    <div class="divider-line"></div>
    <!-- 修改密码 -->
    <div class="account-item">
      <div class="label">
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M15.8333 8.33357H16.6667C17.1269 8.33357 17.5 8.70665 17.5 9.1669V17.5002C17.5 17.9605 17.1269 18.3336 16.6667 18.3336H3.33333C2.8731 18.3336 2.5 17.9605 2.5 17.5002V9.1669C2.5 8.70665 2.8731 8.33357 3.33333 8.33357H4.16667V7.50023C4.16667 4.27858 6.77834 1.6669 10 1.6669C13.2217 1.6669 15.8333 4.27858 15.8333 7.50023V8.33357ZM4.16667 10.0002V16.6669H15.8333V10.0002H4.16667ZM9.16667 11.6669H10.8333V15.0002H9.16667V11.6669ZM14.1667 8.33357V7.50023C14.1667 5.19905 12.3012 3.33357 10 3.33357C7.69882 3.33357 5.83333 5.19905 5.83333 7.50023V8.33357H14.1667Z"
            fill="#3D88F2"
          />
        </svg>

        <span>{{ $t("content.account_info.password") }}</span>
      </div>
      <div class="value">
        <span>{{ "*********" }}</span>
        <span class="status">{{ $t("tag.safe") }}</span>
      </div>
      <div class="button">
        <div class="button-item" @click="onClickEditPassword">
          {{ $t("btnText.change") }}
        </div>
      </div>
    </div>
    <div class="divider-line"></div>
    <!-- 我的手机号 -->
    <div class="account-item">
      <div class="label">
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M5.83317 3.33367V16.667H14.1665V3.33367H5.83317ZM4.99984 1.66701H14.9998C15.4601 1.66701 15.8332 2.04011 15.8332 2.50034V17.5003C15.8332 17.9606 15.4601 18.3337 14.9998 18.3337H4.99984C4.5396 18.3337 4.1665 17.9606 4.1665 17.5003V2.50034C4.1665 2.04011 4.5396 1.66701 4.99984 1.66701ZM9.99984 14.167C10.4601 14.167 10.8332 14.5401 10.8332 15.0003C10.8332 15.4606 10.4601 15.8337 9.99984 15.8337C9.53959 15.8337 9.1665 15.4606 9.1665 15.0003C9.1665 14.5401 9.53959 14.167 9.99984 14.167Z"
            fill="#3D88F2"
          />
        </svg>
        <span>{{ $t("content.account_info.phone") }}</span>
      </div>
      <div class="value">
        <span>{{ memberStore.profile?.mobile }}</span>
        <span class="status">{{ $t("tag.safe") }}</span>
      </div>
      <div class="button">
        <div class="button-item" @click="onClickEditMobile">
          {{ $t("btnText.change") }}
        </div>
      </div>
    </div>
    <div class="divider-line"></div>
    <!-- 我的邮箱 -->
    <div class="account-item">
      <div class="label">
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M2.49984 2.50044H17.4998C17.9601 2.50044 18.3332 2.87354 18.3332 3.33378V16.6671C18.3332 17.1274 17.9601 17.5004 17.4998 17.5004H2.49984C2.0396 17.5004 1.6665 17.1274 1.6665 16.6671V3.33378C1.6665 2.87354 2.0396 2.50044 2.49984 2.50044ZM16.6665 6.03204L10.0597 11.9488L3.33317 6.01373V15.8338H16.6665V6.03204ZM3.75939 4.16711L10.0514 9.71878L16.2507 4.16711H3.75939Z"
            fill="#3D88F2"
          />
        </svg>

        <span>{{ $t("content.account_info.email") }}</span>
      </div>
      <div class="value">
        <span>{{ memberStore.profile?.email }}</span>
        <span class="status">{{ $t("tag.safe") }}</span>
      </div>
      <div class="button">
        <div class="button-item" @click="onClickEditEmail">
          {{ $t("btnText.edit") }}
        </div>
      </div>
    </div>
    <div class="divider-line"></div>
    <!-- 关于我 -->
    <div class="account-item">
      <div class="label">
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12.5 3.33388H4.16667V16.6672H15.8333V6.66721H12.5V3.33388ZM2.5 2.49371C2.5 2.03726 2.87291 1.66721 3.33208 1.66721H13.3333L17.4998 5.83388L17.5 17.4943C17.5 17.958 17.1292 18.3339 16.6722 18.3339H3.32783C2.87063 18.3339 2.5 17.9545 2.5 17.5074V2.49371ZM10 9.58388C8.84942 9.58388 7.91667 8.65113 7.91667 7.50055C7.91667 6.34996 8.84942 5.41721 10 5.41721C11.1506 5.41721 12.0833 6.34996 12.0833 7.50055C12.0833 8.65113 11.1506 9.58388 10 9.58388ZM6.27288 14.1672C6.48016 12.2922 8.06977 10.8339 10 10.8339C11.9303 10.8339 13.5198 12.2922 13.7271 14.1672H6.27288Z"
            fill="#3D88F2"
          />
        </svg>

        <span>{{ $t("content.account_info.about") }}</span>
      </div>
      <div class="value">
        <span :class="formValue.about.value ? '' : 'none'">{{
          formValue.about.value || $t("content.account_info.personal_desc")
        }}</span>
      </div>
      <div class="button">
        <div class="button-item" @click="onClickEditResume">
          {{ $t("btnText.edit") }}
        </div>
      </div>
    </div>
    <div class="divider-line"></div>
    <!-- 我的证书 -->
    <div class="account-item upload">
      <div class="label">
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M2.50016 5.00067H17.5002V15.0007H2.50016V5.00067ZM1.66683 3.33401C1.2066 3.33401 0.833496 3.70711 0.833496 4.16734V15.834C0.833496 16.2943 1.2066 16.6673 1.66683 16.6673H18.3335C18.7937 16.6673 19.1668 16.2943 19.1668 15.834V4.16734C19.1668 3.70711 18.7937 3.33401 18.3335 3.33401H1.66683ZM10.8335 6.66734H15.8335V8.33401H10.8335V6.66734ZM15.0002 10.0007H10.8335V11.6673H15.0002V10.0007ZM8.75016 8.33401C8.75016 9.48459 7.81742 10.4173 6.66683 10.4173C5.51624 10.4173 4.5835 9.48459 4.5835 8.33401C4.5835 7.18341 5.51624 6.25067 6.66683 6.25067C7.81742 6.25067 8.75016 7.18341 8.75016 8.33401ZM6.66683 11.2507C5.056 11.2507 3.75016 12.5565 3.75016 14.1673H9.5835C9.5835 12.5565 8.27766 11.2507 6.66683 11.2507Z"
            fill="#3D88F2"
          />
        </svg>

        <span>{{ $t("content.account_info.cert") }}</span>
      </div>
      <div class="value">
        <img
          v-for="item in certificateList"
          :key="item.id"
          :src="item.single_pic"
          alt=""
        />
      </div>
      <div class="button">
        <div class="button-item" @click="onClickUploadCertificate">
          {{ $t("btnText.upload") }}
        </div>
      </div>
    </div>
    <div class="divider-line"></div>
    <!-- 职业规划 -->
    <div class="account-item" v-if="false">
      <div class="label">
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clip-path="url(#clip0_69_1296)">
            <path
              d="M5.83317 4.16746V1.66746C5.83317 1.20723 6.20627 0.834126 6.6665 0.834126H13.3332C13.7934 0.834126 14.1665 1.20723 14.1665 1.66746V4.16746H17.4998C17.9601 4.16746 18.3332 4.54056 18.3332 5.00079V16.6675C18.3332 17.1277 17.9601 17.5008 17.4998 17.5008H2.49984C2.0396 17.5008 1.6665 17.1277 1.6665 16.6675V5.00079C1.6665 4.54056 2.0396 4.16746 2.49984 4.16746H5.83317ZM3.33317 13.3341V15.8341H16.6665V13.3341H3.33317ZM3.33317 11.6675H16.6665V5.83413H3.33317V11.6675ZM7.49984 2.50079V4.16746H12.4998V2.50079H7.49984ZM9.1665 9.16746H10.8332V10.8341H9.1665V9.16746Z"
              fill="#3D88F2"
            />
          </g>
          <defs>
            <clipPath id="clip0_69_1296">
              <rect
                width="20"
                height="20"
                fill="white"
                transform="translate(0 0.000793457)"
              />
            </clipPath>
          </defs>
        </svg>
        <span>{{ $t("content.account_info.plan") }}</span>
      </div>
      <div class="value">
        <span class="none" v-if="!memberStore.profile?.stage_id">{{
          $t("content.account_info.no_plan")
        }}</span>
        <div class="content_value" v-else>
          <div class="row">
            <div class="row_label">
              {{ $t("form.updatePlan.form.item_1.label") }}：
            </div>
            <div class="row_value">
              {{
                globalStore.getPlanById(
                  memberStore.profile?.department_id,
                  "depart"
                )
              }}
            </div>
          </div>
          <div class="row">
            <div class="row_label">
              {{ $t("form.updatePlan.form.item_2.label") }}：
            </div>
            <div class="row_value">
              {{
                globalStore.getPlanById(
                  memberStore.profile?.profession_id,
                  "profession"
                )
              }}
            </div>
          </div>
          <div class="row">
            <div class="row_label">
              {{ $t("form.updatePlan.form.item_3.label") }}：
            </div>
            <div class="row_value">
              {{
                globalStore.getPlanById(memberStore.profile?.stage_id, "stage")
              }}
            </div>
          </div>
        </div>
      </div>
      <div class="button">
        <div class="button-item" @click="onClickUploadPlan">
          {{ $t("btnText.edit") }}
        </div>
      </div>
    </div>
    <div class="divider-line" v-if="false"></div>
    <!-- 绑定微信 -->
    <div class="account-item" v-if="false">
      <div class="label">
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M8.33433 12.2307C8.33408 12.2135 8.334 12.1963 8.334 12.1791C8.334 10.0888 10.0144 8.33062 12.2948 7.81835C11.9918 5.89986 9.96667 4.33421 7.41732 4.33421C4.65014 4.33421 2.50065 6.17878 2.50065 8.317C2.50065 9.12483 2.80093 9.90092 3.36718 10.566C3.39383 10.5973 3.43686 10.644 3.49435 10.7032C3.98764 11.2107 4.28074 11.8723 4.32938 12.568C4.92364 12.2245 5.61888 12.0945 6.29843 12.2003C6.43663 12.2218 6.54972 12.2382 6.63604 12.2494C6.89243 12.2828 7.15333 12.2998 7.41732 12.2998C7.73171 12.2998 8.03813 12.276 8.33433 12.2307ZM8.71492 13.8568C8.29539 13.9287 7.86149 13.9664 7.41732 13.9664C7.07851 13.9664 6.74568 13.9445 6.42066 13.9022C6.3191 13.8889 6.19292 13.8706 6.04211 13.8471C5.73061 13.7986 5.4118 13.861 5.14258 14.0232L3.55528 14.9797C3.4336 15.0548 3.29059 15.089 3.14761 15.0773C2.78162 15.0471 2.50965 14.7296 2.54014 14.368L2.66533 12.8839C2.69703 12.5081 2.5637 12.1369 2.29926 11.8648C2.21802 11.7812 2.151 11.7085 2.09818 11.6465C1.30322 10.7128 0.833984 9.56192 0.833984 8.317C0.833984 5.19689 3.78144 2.66754 7.41732 2.66754C10.7999 2.66754 13.5866 4.85674 13.9585 7.67415C16.7686 7.80205 19.0007 9.77008 19.0007 12.1791C19.0007 13.1733 18.6205 14.0923 17.9765 14.8379C17.9337 14.8875 17.8794 14.9456 17.8136 15.0123C17.5993 15.2296 17.4913 15.526 17.517 15.8262L17.6184 17.0113C17.6432 17.3001 17.4228 17.5536 17.1263 17.5777C17.0105 17.5871 16.8947 17.5598 16.7961 17.4998L15.5102 16.736C15.292 16.6064 15.0338 16.5566 14.7814 16.5953C14.6593 16.6141 14.557 16.6287 14.4748 16.6393C14.2114 16.6731 13.9417 16.6907 13.6673 16.6907C11.4227 16.6907 9.50192 15.5177 8.71492 13.8568ZM14.5287 14.9479C15.0014 14.8754 15.4826 14.9267 15.9253 15.0935C16.0408 14.6262 16.2809 14.1929 16.6268 13.8421C16.6688 13.7997 16.6988 13.7674 16.7152 13.7485C17.1221 13.2774 17.334 12.7375 17.334 12.1791C17.334 10.6755 15.7484 9.33425 13.6673 9.33425C11.5862 9.33425 10.0007 10.6755 10.0007 12.1791C10.0007 13.6827 11.5862 15.024 13.6673 15.024C13.8685 15.024 14.0673 15.0113 14.2623 14.9862C14.3296 14.9776 14.4189 14.9647 14.5287 14.9479Z"
            fill="#36D96C"
          />
        </svg>

        <span>绑定微信</span>
      </div>
      <div class="value">
        <span :class="formValue.wx.value ? '' : 'none'">{{
          formValue.wx.value || "暂未绑定"
        }}</span>
      </div>
      <div class="button">
        <div class="button-item" v-if="!formValue.wx.isBind">绑定</div>
        <div class="button-item" v-if="formValue.wx.isBind">解绑</div>
      </div>
    </div>
    <div class="divider-line" v-if="false"></div>
    <!-- 绑定Facebook -->
    <div class="account-item" v-if="false">
      <div class="label">
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M11.6667 15.8344H15.8333V4.1677H4.16667V15.8344H10V11.6677H8.33333V10.001H10V8.62254C10 7.50816 10.116 7.10405 10.3339 6.69665C10.5518 6.28924 10.8715 5.9695 11.2789 5.75162C11.5978 5.58107 11.9935 5.47814 12.6847 5.43399C12.9592 5.41646 13.3142 5.43881 13.75 5.50104V7.08437H13.3333C12.5689 7.08437 12.2535 7.12047 12.0649 7.22131C11.948 7.28386 11.8662 7.36569 11.8036 7.48265C11.7028 7.67119 11.6667 7.85815 11.6667 8.62254V10.001H13.75L13.3333 11.6677H11.6667V15.8344ZM3.33333 2.50104H16.6667C17.1269 2.50104 17.5 2.87414 17.5 3.33437V16.6677C17.5 17.128 17.1269 17.501 16.6667 17.501H3.33333C2.8731 17.501 2.5 17.128 2.5 16.6677V3.33437C2.5 2.87414 2.8731 2.50104 3.33333 2.50104Z"
            fill="#3D88F2"
          />
        </svg>

        <span>绑定Facebook</span>
      </div>
      <div class="value">
        <span :class="formValue.facebook.value ? '' : 'none'">{{
          formValue.facebook.value || "暂未绑定"
        }}</span>
      </div>
      <div class="button">
        <div class="button-item" v-if="!formValue.facebook.isBind">绑定</div>
        <div class="button-item" v-if="formValue.facebook.isBind">解绑</div>
      </div>
    </div>
    <div class="divider-line" v-if="false"></div>

    <!-- 编辑弹窗 -->
    <FormModalMemberUpdateNickname
      ref="updateNicknameModalRef"
    ></FormModalMemberUpdateNickname>
    <FormModalMemberUpdatePassword
      ref="updatePasswordModalRef"
    ></FormModalMemberUpdatePassword>
    <FormModalMemberUpdateMobile
      ref="updateMobileModalRef"
    ></FormModalMemberUpdateMobile>
    <FormModalMemberUpdateEmail
      ref="updateEmailModalRef"
    ></FormModalMemberUpdateEmail>
    <FormModalMemberUpdateResume
      ref="updateResumeModalRef"
    ></FormModalMemberUpdateResume>
    <FormModalMemberUploadCertificate
      @uploadDown="certificateUploadDown"
      ref="uploadCertificateModalRef"
    ></FormModalMemberUploadCertificate>
    <FormModalMemberUpdatePlan
      @uploadDown="planUploadDown"
      ref="updatePlanModalRef"
    ></FormModalMemberUpdatePlan>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from "vue";
import { postCertificateList } from "../../../api/profile";
import type { CertificateListItem } from "../../../types/profile";
import { useMemberStore, useGlobalStore } from "../../../store";
import { useRoute } from "vue-router";

const route = useRoute();

const memberStore = useMemberStore();
const globalStore = useGlobalStore();
const certificateList = ref<CertificateListItem[] | undefined>();
const getCertificateListData = async () => {
  let res = await postCertificateList();
  if (res.code === 200) {
    certificateList.value = res.data;
  }
};

// 判断从其他页面来更新数据
const updateDataFromOtherPage = () => {
  let update = route.query.update;
  if (update) {
    switch (update) {
      case (update = "nickname"):
        updateNicknameModalRef.value.show();
        break;
    }
  }
};

onMounted(() => {
  updateDataFromOtherPage();
});

onBeforeMount(() => {
  getCertificateListData();
});

const formValue = ref({
  username: {
    value: "Colin Lam",
    edit: false,
  },
  password: {
    value: "登录密码",
    edit: false,
  },
  phone: {
    value: "18750277437",
    edit: false,
  },
  email: {
    value: "ctw2016love@163.com",
    edit: false,
  },
  about: {
    value: "",
    edit: false,
  },
  certificate: {
    value: ["", ""],
  },
  plan: {
    value: "",
    edit: false,
  },
  wx: {
    value: "微信名",
    isBind: true,
  },
  facebook: {
    value: "",
    isBind: false,
  },
});

// ============================弹窗编辑处理=================================
const updateNicknameModalRef = ref();
const onClickEditNickname = () => {
  if (isMobile()) {
    goto("/mobile/updateName");
    return;
  }
  updateNicknameModalRef.value.show();
};

const updatePasswordModalRef = ref();
const onClickEditPassword = () => {
  if (isMobile()) {
    goto("/mobile/updatePassword");
    return;
  }
  updatePasswordModalRef.value.show();
};

const updateMobileModalRef = ref();
const onClickEditMobile = () => {
  if (isMobile()) {
    goto("/mobile/updateMobile");
    return;
  }
  updateMobileModalRef.value.show();
};

const updateEmailModalRef = ref();
const onClickEditEmail = () => {
  if (isMobile()) {
    goto("/mobile/updateEmail");
    return;
  }
  updateEmailModalRef.value.show();
};

const updateResumeModalRef = ref();
const onClickEditResume = () => {
  if (isMobile()) {
    goto("/mobile/updateResume");
    return;
  }
  updateResumeModalRef.value.show();
};

const uploadCertificateModalRef = ref();
const onClickUploadCertificate = () => {
  if (isMobile()) {
    goto("/mobile/uploadCertificate");
    return;
  }
  uploadCertificateModalRef.value.show();
};
const certificateUploadDown = () => {
  getCertificateListData();
};

const updatePlanModalRef = ref();
const onClickUploadPlan = () => {
  if (isMobile()) {
    goto("/mobile/updatePlan");
    return;
  }
  updatePlanModalRef.value.show();
};
const planUploadDown = () => {
  getCertificateListData();
};
</script>
<style scoped lang="less">
.account-info {
  font-size: 16px;
  color: #36434d;
  .divider-line {
    margin: 21px 0;
  }
  .account-item {
    display: flex;
    align-items: center;
    .label {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 200px;
      svg {
        width: 20px;
        height: 20px;
      }
    }
    .value {
      display: flex;
      gap: 8px;
      align-items: center;
      min-width: 300px;
      max-width: 300px;
      flex-wrap: wrap;
      margin-right: 10px;
      .status {
        padding: 4px 8px;
        font-size: 14px;
        color: #36d96c;
        background: rgba(54, 217, 108, 0.1);
        border-radius: 6px 6px 6px 6px;
      }
      .none {
        color: rgba(54, 67, 77, 0.4);
      }
      img {
        width: 90px;
        height: 60px;
        object-fit: contain;
      }
      .content_value {
        display: flex;
        flex-direction: column;
        gap: 10px;
        .row {
          display: flex;
          align-items: center;
        }
      }
    }
    .button {
      display: flex;
      .button-item {
        cursor: pointer;
        padding: 6px 12px;
        border: 1px solid #3d88f2;
        border-radius: 10px 10px 10px 10px;
        color: #3d88f2;
        &.commit {
          background-color: #3d88f2;
          color: #fff;
        }
        &.cancel {
          color: #36d96c;
          border-color: #36d96c;
        }
      }
    }
    &.username {
      .value {
        color: #172026;
        font-size: 16px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .account-info {
    font-size: 82px;
    .divider-line {
      margin: 82px 0;
    }
    .account-item {
      flex-wrap: wrap;
      justify-content: space-between;
      .label {
        margin-bottom: 61px;
        width: 100%;
        gap: 61px;
        svg {
          width: 102px;
          height: 102px;
        }
      }
      .value {
        padding-left: 164px;
        max-width: 100%;
        gap: 41px;
        font-size: 82px !important;
        span {
          white-space: nowrap;
        }
        .status {
          padding: 20px 41px;
          font-size: 72px;
          border-radius: 31px 31px 31px 31px;
        }
        img {
          width: 470px;
          height: 300px;
        }
      }
      .button {
        .button-item {
          padding: 31px 61px;
          border-radius: 51px;
          font-size: 72px;
        }
      }
      &.upload {
        .value {
          max-width: 80%;
        }
      }
    }
  }
}
</style>
